<template>
	<view class="page">
		<view class="input-box">
			<view class="label">手机号码</view>
			<view class="content">
				<up-input
					placeholder="请输入"
					type="number"
					v-model="formData.feedPhone"
				></up-input>
			</view>
		</view>
		<view class="input-box">
			<view class="label">反馈内容</view>
			<view class="content">
				<up-textarea v-model="formData.feedMsg" placeholder="请输入内容" ></up-textarea>
			</view>
		</view>
		
		<button class="make-button" type="primary" @click="onFeed">提交</button>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { test } from '@/uni_modules/uview-plus';
	
	const formData = reactive({
		feedPhone: undefined,
		feedMsg: undefined,
		uuid: null,
		photoId: null
	})
	const token = ref(null)
	onLoad((option) => {
		formData.uuid = option.orderId
		formData.photoId = option.photoId
	})
	onShow(() =>{
		token.value = uni.getStorageSync('token')
	})
	
	function onFeed() {
		const { feedPhone, feedMsg } = formData
		if (!feedPhone || !test.mobile(feedPhone)) {
			uni.showToast({
				icon: 'none',
				title: '请输入正确手机号码'
			})
			return
		}
		if (!feedMsg ) {
			uni.showToast({
				icon: 'none',
				title: '请输入反馈内容'
			})
			return
		}
		uni.request({
			url: `${getApp().globalData.baseUrl}/prod-api/system/pays/mine/feedback/${formData.uuid}`,
			data: {
				feedPhone: formData.feedPhone,
				feedMsg: formData.feedMsg
			},
			header: {
				'Authorization': "Bearer " + token.value,
			},
			method: 'PUT',
			success: (res) => {
				if (res.data.code === 200) {
					uni.showModal({
						title: '提示',
						content: '感谢您的反馈，可重新制作一次',
						confirmColor: '#EBBD9D',
						cancelText: '放弃',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.redirectTo({
									url: `/pages/upload/upload?uuid=${formData.photoId}&orderId=${formData.uuid}`
								})
							} else if (res.cancel) {
								uni.reLaunch({
									url: `/pages/my/my`
								})
							}
						}
					})
				}
			},
			fail: (error) => {
				console.log(error);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 40rpx;
		box-sizing: border-box;
	}
	.input-box {
		overflow: hidden;
		margin-bottom: 30rpx;
		.label {
			width: 140rpx;
			line-height: 76rpx;
			color: #7F7F7F;
			float: left;
		}
		.content {
			width: 510rpx;
			float: right;
		}
	}
	
	.make-button {
		margin-top: 200rpx;
		color: #ffffff;
		font-family: PingFang SC;
		font-size: 28rpx;
		leading-trim: NONE;
		line-height: 80rpx;
		letter-spacing: 10%;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #D19973 0%, #EBBD9D 100%);
		height: 80rpx;
	}
	
	.make-button:active {
		opacity: 0.8;
	}
</style>